<template>
  <div style="overflow-x: hidden">
    <a-row :gutter="[12, 12]">
      <a-col :xs="24" :xl="6">
        <!-- 左侧 -->
        <a-row :gutter="[0, 16]">
          <a-col :span="24">
            <WebsiteRanking :selectdate="selectdate" style="height: 24vh" />
          </a-col>
          <a-col :span="24"> <SiteWeightRanking :selectdate="selectdate" style="height: 30vh" /> </a-col>
          <a-col :span="24"> <Aircraft :selectdate="selectdate" style="height: 30vh" /> </a-col>
        </a-row>
      </a-col>
      <a-col :xs="24" :xl="12">
        <a-row :gutter="[0, 16]">
          <a-col :span="24">
            <StationmasterPercentage :selectdate="selectdate" style="height: 24vh" />
          </a-col>
          <a-col :span="24"> <SearchEngine style="height: 62vh" /> </a-col>
        </a-row>
      </a-col>
      <a-col :xs="24" :xl="6">
        <!-- 右侧 -->
        <a-row :gutter="[0, 16]">
          <a-col :span="24">
            <WebsiteTitle :selectdate="selectdate" style="height: 24vh" />
          </a-col>
          <a-col :span="24"> <TrafficRanking :selectdate="selectdate" style="height: 30vh" /> </a-col>
          <a-col :span="24"> <EmailRanking :selectdate="selectdate" style="height: 30vh" /> </a-col>
        </a-row>
      </a-col>
    </a-row>
    <div class="type_">
      <Tabs :dataSource="['日', '周', '月']"  @change="tapChange" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import WebsiteRanking from "./components/WebsiteRanking.vue";
import StationmasterPercentage from "./components/StationmasterPercentage.vue";
import WebsiteTitle from "./components/WebsiteTitle.vue";
import SiteWeightRanking from "./components/SiteWeightRanking.vue";
import SearchEngine from "./components/SearchEngine.vue";
import Aircraft from "./components/Aircraft.vue";
import EmailRanking from "./components/EmailRanking.vue";
import TrafficRanking from "./components/TrafficRanking.vue";
import Tabs from "@/components/Tabs";


let selectdate = ref('day');
const _type = ref();

function tapChange(key: string) {
  console.log(key);
  if(key == 1){
    selectdate.value = 'day'
  }else if(key == 2){
    selectdate.value = 'week'
  }else if(key == 3){
    selectdate.value = 'month'
  }
}
</script>

<style lang="less" scoped>
.type_ {
  position: fixed;
  top: 5px;
  left: 20px;
  z-index: 1000;
  width: 200px;
  /deep/ .ant-menu-horizontal {
    line-height: 2em;
  }
  /deep/ .ant-menu {
    border-bottom: none !important;
  }
  /deep/ .ant-menu-item {
    padding: 0 10px;
  }
  /deep/ .ant-menu-horizontal > .ant-menu-item::after {
    left: 50%;
    transform: translateX(-50%);

    padding: 0 5px;
  }
}
</style>
